<template>
  <div class="table-page">
    <GiTable
      row-key="userWechatGroupId"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
      :simple="true"
    >
      <template #custom-extra>
        <a-form
          label-align="right"
          layout="inline"
          auto-label-width
          :model="listParams"
          size="small"
          class="form my-10"
        >
          <a-form-item field="isActivation" label="激活状态">
            <a-select
              v-model="listParams.isActivation"
              @change="changeCurrent(1)"
              placeholder="请选择"
              class="w-30n"
              allow-clear
            >
              <a-option value="">全部</a-option>
              <a-option :value="0">未激活</a-option>
              <a-option :value="1">已激活</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="isOpenGroup" label="开启状态">
            <a-select
              v-model="listParams.isOpenGroup"
              @change="changeCurrent(1)"
              placeholder="请选择"
              class="w-30n"
              allow-clear
            >
              <a-option value="">全部</a-option>
              <a-option :value="0">开启</a-option>
              <a-option :value="1">关闭</a-option>
            </a-select>
          </a-form-item>
          <a-form-item hide-label>
            <ms-date
              v-model:start="listParams.startAt"
              v-model:end="listParams.endAt"
              :show-quick="true"
              :disabledDate="(current) => dayjs(current).isAfter(dayjs())"
            />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" size="small" @click="changeCurrent(1)">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button size="small" @click="onResetSearch">
                <template #icon>
                  <icon-sync />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
      <template #followSendFailNum="{ record }">
        <span class="textD43036 font-bold text-underline cursor-pointer">{{ record.followSendFailNum || '0' }}</span>
      </template>
      <template #preview="{ record }">
        <a-button type="text" @click="preview(record.userWechatGroupId, record.sourceChatRoomName, record.groupName)">
          <template #icon><icon-eye /></template>
          预览
        </a-button>
      </template>
    </GiTable>
    <Preview ref="PreviewRef" />
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { detailSourceGroupInfo } from '@/apis'
import dayjs from 'dayjs'
import Preview from './Preview.vue'
import { deleteEmpty } from '@/utils/common'
import MsCopyDiv from '@/components/MsCopyDiv/index.vue'
import GiDot from '@/components/GiDot/index.vue'

const props = defineProps(['userWechatId'])

const columns = ref([
  {
    title: '设备微信群列表',
    tooltip: true,
    ellipsis: true,
    width: 200,
    render: (data) => {
      const text = data.record.groupName
      return h(MsCopyDiv, { text, title: '群名称', line: 2, no: true })
    }
  },
  {
    title: '激活状态',
    width: 100,
    render: (data) => {
      const status = data.record.isActivation
      const type = status == 1 ? 'success' : 'info'
      const text = status == 1 ? '已激活' : '未激活'
      return h(GiDot, {
        animation: false,
        type: type,
        text: text
      })
    }
  },
  {
    title: '开启状态',
    width: 100,
    render: (data) => {
      const status = data.record.isOpenGroup
      const type = status == 1 ? 'success' : 'info'
      const text = status == 1 ? '开启' : '关闭'
      return h(GiDot, {
        animation: false,
        type: type,
        text: text
      })
    }
  },
  {
    title: '跟发源头群',
    tooltip: true,
    ellipsis: true,
    width: 250,
    render: (data) => {
      const text = data.record.sourceChatRoomName || '--'
      return h(MsCopyDiv, { text, title: '源头', line: 2, no: true })
    }
  },
  {
    title: '最近开启时间',
    width: 180,
    render: (data) => {
      return data.record.updatedAt || '--'
    }
  },
  {
    title: '最近跟发时间',
    width: 180,
    render: (data) => {
      return data.record.lastFollowAt || '--'
    }
  },
  {
    title: '跟发数量',
    width: 100,
    dataIndex: 'followSendNum',
    align: 'center'
  },
  {
    title: '失败数量',
    width: 100,
    align: 'center',
    slotName: 'followSendFailNum'
  },
  {
    title: '跟发预览',
    width: 120,
    slotName: 'preview'
  }
])

const loading = ref(false)
const tableData = ref([])
const PreviewRef = ref()

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 10 })

const listParams = reactive({
  page: 1,
  userWechatId: undefined,
  isActivation: undefined,
  isOpenGroup: undefined,
  startAt: undefined,
  endAt: undefined
})

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.userWechatId = props.userWechatId
    const res = await detailSourceGroupInfo(deleteEmpty(listParams))
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

watch(
  () => props.userWechatId,
  () => {
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)

// 列表重置搜索
const onResetSearch = () => {
  listParams.isActivation = listParams.isOpenGroup = listParams.startAt = listParams.endAt = undefined
  changeCurrent(1)
}

// 跟预览
const preview = (userWechatGroupId, sourceChatRoomName, groupName) => {
  PreviewRef.value?.openModal(userWechatGroupId, sourceChatRoomName, groupName)
}
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}

.table-page {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
